Cuando vamos a realizar algún trabajo llegamos al punto de escoger un tipo de fuente para el título, no siempre es sencillo encontrar una fuente acorde con el diseño así que damos vueltas y más vueltas hasta encontrar alguna, lo malo es que no todas las fuentes son gratuitas.
Ese problema no lo tendremos en FonTs2u allí podemos descargar multitud de fuentes gratuitas que encontraremos clasificadas por categorías y un menú lateral para informarnos de las nuevas fuentes que se van añadiendo o las más descargadas.
Wallpapers WIDE |
|
▼ |
Estupendo generador de esquinas redondeadas en imágenes |
|
▼ |
No sé si recordarán una entrada sobre un efecto que a mi me gusta mucho es el efecto Glossy creado con un script que además redondea las esquinas de cualquier imagen.
Pues el tema de hoy siguen siendo los generadores online y esta vez vamos a conocer un sitio que seguramente vaya a nuestros favoritos se trata de Round My Pic una página proporcionada por Jose, a secas autor de Cogito ergo scribere espacio que recomiendo visitar por su temática amena y variada.
En Round My Pic simplemente tenemos que subir la imagen desde nuestro PC y marcar el botón Round it Now ¿fácil verdad? el resultado son esquinas redondeadas con un sutil efecto de relieve en el borde que recuerda mucho el efecto Glossy.
Me ha gustado mucho esta aplicación, otra más a la nube de generadores online.
Generador de mapeado en imágenes |
|
▼ |
Ayer hablábamos de generadores, en concreto de Isdntek.
Allí tenemos "Image Mapper" es un generador que añade enlaces sobre una imagen o dicho de otra forma es un mapeado de imágenes.
Oloman nos ofrecía una estupenda explicación que recomiendo porque nos explica con detalle la forma de crear las coordenadas mediante HTML, me parece la forma más correcta de hacerlo sin embargo la facilidad de uso de este generador tienta bastante porque el resultado es el mismo y nos ahorramos muchos cálculos y tiempo. Aún así vuelvo a decir que es mucho más útil aprender a hacer las cosas que hacerlas por la vía fácil sin saber lo que estamos haciendo.
Para crear la imagen con mapeado con "Image Mapper" lo primero que necesitamos claro está es una imagen a la que añadiremos distintos enlaces, sabemos qué partes de la imagen son un enlace porque le vamos a añadir un texto en el lugar que irá cada uno. El texto lo podemos añadir con cualquier editor por ejemplo el Paint que todos tenemos en el PC.
Para el ejemplo he añadido tres textos es decir uno para cada enlace a modo de menú aunque también es posible y original simplemente utilizando algunos motivos de la imagen.
Una vez tenemos la imagen la subimos a nuestro sitio de alojamiento puede ser una entrada del blog que guardaremos más tarde en borrador o directamente a nuestro álbum de Piacasa de esa forma conseguimos la url de la imagen.
1- Añadimos la url de la imagen en "Image URL" la imagen se mostrará en la parte inferior cuando marquemos el botón "Load Image".
2- Añadimos la url del sitio que vamos a enlazar en "Link".
3- En "Caption" es el espacio para añadir el texto que se mostrará al pasar el puntero sobre el enlace.
4- Marcamos sobre "New Link" y se mostrará un cuadradito que arrastraremos sobre el lugar exacto que será el texto que va a hacer de enlace o link. En las esquinas de ese cuadradito con el botón izquierdo del ratón podemos estirar y encoger hasta dar con el tamaño indicado.
Para cada enlace repetimos los pasos 2 - 3 y 4 una vez terminamos marcamos sobre el botón "Make Code" y nos proporciona el código listo para copiar y pegar en cualquier sitio del blog que permita html.
Generador de marcos y algunos más |
|
▼ |
Estuve leyendo el otro día que hasta los mejores diseñadores dan buena cuenta de las herramientas online en concreto de los generadores porque hay algunos que vale la pena conocer, para tener a mano los que utilizo hice una nube de enlaces que está en el footer, a lo cómodo y rápido no hay quien se le resista.
Este generador de marcos pertenece a la página de Isdntek un sitio donde también podemos crear botones, menús, efecto shadow de cualquier color en las imágenes, galerías y entre otras muchas curiosidades algo muy interesante, un generador para crear un mapa de enlaces sobre una imagen. Pero de esto último hablaremos mañana.
Crear un marco es tan sencillo como jugar, vamos escogiendo el borde, grosor, color o textura y nos proporciona en la parte inferior el código para añadir en nuestro blog.
El texto ....contents go here.... es el que debemos sustituir por el nuestro, quien dice texto dice una imagen o cualquier contenido.
|
|
El vista previa |
|
▼ |
Pues no es que esta entrada nos vaya a ser de utilidad porque es obvio que todos sabemos de qué trata y el que no lo haya percibido en su blog con la imagen todo queda dicho, es el último cambio de Blogger o al menos el último que he visto.
Con todas las mejoras que nos están sorprendiendo no queda más remedio que ser positivos y optimistas.
Si alguien se pierde ya sabe que está en vista previa, regrese a la otra pestaña que ahí sólo puede mirar.
Pink Glove Dance |
|
▼ |
Canción: Down - Jay Sean Feat. Lil Wayne
Este vídeo ha llegado a mi bandeja de correo, el texto que lo acompaña dice que todo el personal del hospital baila en beneficio de la lucha contra el cáncer de mama. Si se consigue hacer funcionar y mandar esta vídeo 1 millón de veces, el fabricante de los guantes rosa, les entregará una donación considerable para el tratamiento del cáncer de mama.
No sé si se cumplirán las expectativas sobre esta idea ni la forma de controlar la cantidad de veces que ha sido enviado, si sé que a enviar correos de forma masiva se le llama spam pero tampoco es necesario hacerlo de llegar de esa forma.
Pienso que, aunque la idea no llegara a dar sus frutos el mensaje de solidaridad y esperanza es lo que cuenta.
- Me comentan que se contabiliza cada click en el enlace de YouTube (ya no hay excusa)
Emoticones - copiar y pegar en el formulario |
|
▼ |
A petición de varias personas vamos a añadir los emoticones en los comentarios y al mismo tiempo añadiremos una tabla sobre el formulario con la idea de poder copiar y pegar los emoticones.
Los emoticones, o mejor dicho el script los añadiremos directamente a la plantilla, nos evitamos con ello buscar alojamiento externo para el script. Hay otra forma de añadirlos, es una excelente idea que J.Miur explicó en su día, se trata de añadir el script en el interior de un gadget de HTML evitamos con ello buscar alojamiento externo y manipular la plantilla, en ambos casos recomiendo antes de empezar guardar copia de la plantilla por si comentemos algún error poder enmendarlo.
1- Añadimos los emoticones en la plantilla.
En plantilla, edición de HTML justo después de ]]></b:skin> añadimos los estilos para que los emoticones queden en la misma línea del texto:
<style type='text/css'>
.comment-body p img {vertical-align: top; padding-right: .3em;}
</style>
Copiamos el contenido de este archivo y lo pegamos a continuación del anterior.
Guardamos los cambios y marcamos para expandir la plantilla buscaremos el siguiente código de comentarios:
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p></b:if>
</dd>
La línea en negrita la vamos a sustituir por lo siguiente:
<p expr:id='"combody-" + data:comment.anchorName'><data:comment.body/></p>
<script type='text/javascript'>
cual = "combody-" + "<data:comment.anchorName/>";
emoticonComentario(cual);
</script>
Si probamos veremos que nuestros comentarios ya tienen la opción para añadir emoticones.
2- Añadimos la tabla.
En plantilla edición de HTML tenemos que buscar lo siguiente:
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<!-- Aquí pegaremos la tabla de emoticones -->
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
La tabla que debemos añadir la podemos copiar del siguiente archivo.
¿El ejemplo? en el formulario de comentarios de esta misma entrada.
Las imágenes del script son gentileza de J.Miur de Vagabundia y están alojadas en ImageShack, las de la tabla las he alojado en Blogger. Recomiendo sustituirlas por otras alojadas en el sitio que normalmente usa cada uno.El proceso es muy sencillo, copiamos la url de cada emoticon y la pegamos en la barra del navegador, cuando visualizamos la imagen la descargamos a nuestro PC, de esa forma las podemos subir en una entrada del blog o directamente en el en álbum de Picasa. Copiamos la nueva url y la sustituimos por las que contiene el script y la tabla.
Si queremos seguir jugando con los emoticones quizás interese "Emoticones y algo más"
Supalogo generador de logos online |
|
▼ |
Supalogo es una herramienta online que nos ayudará a crear logos y personalizar texto en un abrir y cerrar de ojos. En Option podemos escoger tipo de fuente, tamaño, grosor, color de fondo o transparencia si así lo deseamos y la posibilidad de dejar el texto simplemente de color o añadir un agradable efecto glossy o gradient.
REFERENCIA: Juanguis de Punto Geek
Imágenes gratuitas libres de derechos |
|
▼ |
Imágenes y más imágenes es lo que siempre necesitamos para ilustrar nuestras entradas para decorar esto de aquí y lo otro de más allá ¿libres de derechos de autor? ¿tendrá copyright? ¿es necesario hacer referencia del sitio? para no hacernos estas preguntas una y otra vez en Photo Laboratory tenemos la oportunidad de descargar libremente hasta 35 Mb diarios de imágenes libres de derechos y totalmente gratuitas tanto para uso comercial como personal.
Texturas imágenes reales de maderas |
|
▼ |
Buscando texturas de madera he conocido Defcon x una página para tener a mano si pensamos en cambiar nuestro diseño, las texturas son imágenes reales de maderas y los resultados espectaculares.
REFERENCIA:Utilidades para Websmaster
Añadiendo una imagen en la caja de contenido |
|
▼ |
Hace unos días me preguntaban por la forma de mostrar los códigos en algunos ejemplos, propuse una entrada explicándolo y aquí la tenemos.
Lo primero de todo es crear la caja de contenido personalizada al estar explicado con anterioridad podemos seguir esos pasos y continuamos con lo siguiente que tratará de añadir esas imágenes que vemos en la parte superior izquierda de la caja. Los ejemplos los podéis ver en esta misma entrada son esas imágenes de fondo rojo y texto blanco que nos indican la clase de código que vamos a copiar si es CSS o HTML.
En plantilla edición de html añadimos los estilos para ubicar esas imágenes, supongamos que deseo añadir una imagen que la vamos a mostrar cuando añadimos CSS añadimos entonces una clase a esa imagen que la llamaremos "css"
pre.css {
background:transparent url(url-imagen) no-repeat scroll left top;
}
Donde url-imagen lo sustituimos por la url de nuestra imagen, guardamos los cambios y en la entrada que deseamos mostrar la caja de contenido con imagen añadimos unas líneas de html con la misma clase que se asocia a esa imagen que sería lo siguiente:
<pre class="css">Contenido de la caja
</pre>
Con eso, veremos la imagen en la parte superior izquierda de nuestro contenido:Contenido de la caja
Pero, si seguimos los pasos del enlace para personalizar la caja de contenido también tendremos que añadir <code> al principio de nuestro contenido y </code> al final, de forma que nos quedaría más o menos así:
<pre class="css"><code>Contenido de la caja
</code></pre>
¿Se puede hacer con cualquier otra imagen y contenido? puede hacerse, simplemente sustituyendo la url de la imagen y el contenido, sólo hay que entender que el nombre de la clase que añadimos asociado a esa imagen debe coincidir con el que añadimos en html para mostrar la caja de contenido.
Un último detalle, si te gustan las imágenes que se han usado en esta entrada eres libre de llevártelas pero por favor utiliza tu propia url alojándolas en tu álbum de Picasa o cualquier otro sitio.
Wallpapers 4 rosas |
|
▼ |
Flavors.me crea páginas personales con estilo. |
|
▼ |
Lo descubrí hace unos días cuando miraba la página de Tina Chen, no sé si recordaréis cuando comentaba que es una de las diseñadoras de las plantillas que proporciona el nuevo diseñador de Blogger.
Me sorprendió su página, primero porque esperaba que fuera un blog de Blogger y segundo porque lo que veía era algo distinto y me gustaba. La primera idea fue pensar que ese sitio sería de pago comprobé que estaba equivocada y para mis sorpresa descubrí que el único requisito es registrase. Guardé la página en marcadores hasta que el otro día la recordé visitando a CaTa de Infinitos mundos
Flavors.me es la herramienta ideal para crear una página web personal con estilo, sorprenderá la facilidad de manejo y los resultados que podemos obtener. En Twitter podemos ver algunos ejemplos que nos darán alguna que otra idea.
La finalidad es conseguir un espacio donde mostrar todos nuestros contenidos y actividad en la web gracias a las aplicaciones que proporciona de Twitter, Facebook, YouTube, Flickr y RSS, entre otros.
Sitios como Twitter y Facebook nos pedirán el visto bueno para que la aplicación acceda a ellos, con RSS podemos añadir el feed de nuestro blog que el el caso de Blogger nos proporciona. FeedBurner
Era el momento de empezar a jugar para poner un ejemplo
Abrazar la vida |
|
▼ |